<!--main-->
<template>
  <div >
    <el-button type="primary" @click="change" >切换显示</el-button>
    <v-chart
        :option="option"
        style="height: 80vh"
        autoresize></v-chart>
  </div>
</template>

<script setup lang="ts">
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import {onMounted, provide, ref} from "vue";
import {BookRank} from "../api";
import {ElMessage} from "element-plus";
import {use} from "echarts/core";
import {CanvasRenderer} from "echarts/renderers";
import {BarChart} from "echarts/charts";
use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);
const ChartType = ref<string>("bar");
const ChartTheme = ref<string>("default");
provide(THEME_KEY, "default");
let option =  ref({


  label: {
    show: true,  // 柱状图显示数值
    rotate: 30, // 值旋转角度
  },
  title: {
    text: "图书阅读量数据",
    left: "center"
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} 次阅读量"
  },
  legend: {
    orient: "vertical",
    left: "left",
    // data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
    data: []
  },
  xAxis: {
    // axisLabel: {
    //   interval:0,
    //   formatter:function(value: string)
    //   {
    //     return value.split("").join("\n");
    //   }
    // },
    axisLabel: {
      margin: 15,//距离
      interval: 0,
      rotate: 30,//倾斜度
    },
    // orient: "vertical",
    // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    data: [],
  },
  yAxis: {
    type:"value"
  },
  series: [
    {
      name: "图书阅读量",
      type: ChartType.value,
      // data: [5, 20, 36, 10, 10, 20],
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      },
      smooth: true,
      markLine: {
        data: [
          {
            type: 'average', name: '平均值'
          }
        ]
      },

    },
  ],
});
onMounted(()=>{

  BookRank().then(res =>{
    option.value.legend.data = []
    console.log(res)
    for (let dataKey = res.data.data.length - 1; dataKey >= 0; dataKey--) {
      option.value.legend.data.push(res.data.data[dataKey].Name)
      option.value.xAxis.data.push(res.data.data[dataKey].Name)
      option.value.series[0].data.push({value: res.data.data[dataKey].Count, name: res.data.data[dataKey].Name})
    }
    console.log(option.value.legend.data)
    console.log(option.value.series[0].data)
  })
})
const change = () =>{
  ChartType.value = ChartType.value == "bar" ? "line": "bar"
  option.value.series[0].type = ChartType.value
  ElMessage.success("切换成功！")
}
</script>